<!-- 文章信息管理页 -->
<template>
    <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="a_id" label="Id" width="100"></el-table-column>
        <!-- 作者信息 -->
        <el-table-column prop="author" label="Author" width="150">
            <template #default="scope">
                <!-- 作者头像 -->
                <div style="display: flex;">
                    <el-avatar :size="30" :src="scope.row.author_gravatar" />
                    <!-- 作者名称 -->
                    <div style="align-self: center;margin: 0px 5px;">
                        {{ scope.row.author }}
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="title" label="Title" width="150">
            <template #default="scope">
                <!-- 超出距离省略文字 -->
                <div style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{ scope.row.title }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="description" label="description" width="200">
            <template #default="scope">
                <!-- 超出距离省略文字 -->
                <div style="width: 150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{ scope.row.description }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="content" label="content" width="150">
            <template #default="scope">
                <!-- 点击查看 -->
                <el-button type="primary" @click="handleClick(scope.row.content)">查看</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="Date" width="150"></el-table-column>
        <el-table-column prop="tags" label="Tags">
            <template #default="scope">
                <el-tag v-for="(tag, index) in scope.row.tags.split(',')" :key="index" style="margin: 0px 5px;">
                    {{ tag }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="isRecommend" label="文章推荐">
            <template #default="scope">
                <el-button color="#626aef" size="small" :plain="scope.row.isRecommend == 0 ? true:false " @click="handleRecommend(scope.$index, scope.row)">
                {{ scope.row.isRecommend == 0 ? '推荐文章' : '不推荐'}}
                </el-button>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                :disabled="scope.row.author_id!=this.$store.state.user.u_id">
                    Edit
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    Delete
                </el-button
                >
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="this.tableData.pageNum"
            v-model:page-size="this.tableData.size"
            :page-sizes="[5, 10, 20, 50]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.tableData.total"
            @size-change="getArticle"
            @current-change="getArticle"
        />
  </div>

    <!-- 显示文章内容的对话框 -->
    <el-dialog v-model="dialogVisible" title="Shipping address">
        <!-- 文章展示 -->
        <div v-html="showContent"></div>
    </el-dialog>

</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'

export default {
  name: 'test3',
  components: {},
  props: {},
  data() {
    return {
        tableData:{
            total:0,
            pageNum:1,
            size:5,
            data:[]
        },
        dialogVisible:false,
        showContent:''
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleRecommend(index, value){
        axios.get('http://localhost:8888/admin/Recommend',{
            params:{
            a_id:value.a_id
            }
        }).then(data=>{
            if(data.data.data){
                ElMessage({
                message: '已推荐文章.',
                type: 'success',
                })
            }else{
                ElMessage({
                message: '该文章已取消推荐.',
                type: 'success',
                })
            }
            this.$router.go(0)
        })
    },
    handleDelete(index, value){
        console.log(value.a_id);
        axios.get('http://localhost:8888/admin/delArticle',{
            params:{
            a_id:value.a_id
            }
        }).then(data=>{
            if(data.data.data){
                ElMessage({
                message: '删除成功.',
                type: 'success',
                })
            }
            this.$router.go(0)
        })
    },
    handleEdit(index, value){
        this.$router.push('/mine'+'?id='+value.author_id)
    },
    handleClick(content){
        this.dialogVisible = true
        this.showContent = content
    },
    getArticle(){
        axios.get('http://localhost:8888/admin/getArticle',{
        params:{
            pageNum:this.tableData.pageNum,
            size:this.tableData.size
        }
        }).then(data=>{
            if(data.data.data){
                this.tableData = data.data.data
            }
        })
    }
  },
  created() {
    this.getArticle()
  },
  mounted() {}
}
</script>

<style scoped>
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
